<template>
  <div class="view-container">
    <el-card class="assets-card">

      <div class="assets-total">
        <h1>累计租金收入</h1>
        <h2>¥ {{total | parsePrice | fixed2}}</h2>
      </div>

      <div class="assets-today">

        <div class="today-receive">
          <div class="today-received">
            <p>今日实收租金</p>
            <p>¥ {{todayReceived | parsePrice | fixed2}}</p>
          </div>
          <div class="today-unreceived">
            <p>今日未收租金</p>
            <p>¥ {{todayUnreceived | parsePrice | fixed2}}</p>
          </div>
        </div>

        <div class="today-progress">
          <el-progress :show-text="true" :text-inside="true" :stroke-width="20" status="success"
                       :percentage="percentage"></el-progress>
        </div>

        <div class="today-total-received">
          <div class="content">
            <p>今日应收租金</p>
            <p>¥ {{todayTotal | parsePrice | fixed2}}</p>
          </div>
        </div>

      </div>

    </el-card>

    <el-card class="assets-card">
      <div class="assets-item">
        <label>我的余额:</label>
        <div class="content">
          <span>¥ {{balance | parsePrice | fixed2}}</span>
          <el-button type="primary" @click.stop.prevent="assetsWithdraw()">申请提现</el-button>
        </div>
      </div>
      <div class="assets-item">
        <label>冻结资金:</label>
        <div class="content">
          <span>¥ {{freeze | parsePrice | fixed2}}</span>
        </div>
      </div>
    </el-card>

  </div>
</template>

<script>
  import {getAssets} from '@/api/assets';

  export default {
    name: 'assetsIndex',
    data()
    {
      return {
        total: 0, //累计租金收入
        balance: 0, //余额
        freeze: 0, //冻结资金
        todayReceived:0, //今天已收
        todayUnreceived:0, //今天未收
      }
    },
    computed: {
      percentage()
      {
        if(this.todayTotal<=0)
        {
           return 0;
        }
        let per = (this.todayReceived / this.todayTotal) * 100;
        return parseFloat(per.toFixed(2));
      },
      todayTotal() //今天应收
      {
        return this.todayReceived + this.todayUnreceived;
      }
    },
    mounted()
    {
       this.getAssets();
    },
    methods: {
      getAssets()
      {
        getAssets().then(resp=>{
          let data = resp.data || {};
          this.total = data.rentTotal;
          this.balance = data.balance;
          this.freeze = data.frozen;
          this.todayReceived = data.todayReceiptsRent;
          this.todayUnreceived = data.todayUnreceivedRent;

        }).catch(err=>{

        });
      },
      assetsWithdraw()
      {
        this.$router.push({name: 'assetsWithdraw'});
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../styles/mixin";

  .assets-card {
    width: 780px;
    box-shadow: none;
    padding: 30px;
    position: relative;
    margin-bottom: 20px;
    text-align: center;

    .assets-total {
      display: inline-block;
      font-size: 14px;
      min-width: 20em;
      padding: 20px;
      text-align: center;
      margin: 0 auto;
      border: 1px solid #d1dbe5;
      border-radius: 4px;
      background-color: #f7fcff;
      overflow: hidden;

      > h1 {
        margin: 0 0 10px;
        font-size: 16px;
        color: #9aaabf;
        font-weight: normal;
      }

      > h2 {
        margin: 0;
        font-size: 20px;
        color: #333;
      }
    }

    .assets-today {
      .today-receive {
        @include clearfix;
      }

      .today-received,
      .today-unreceived,
      .today-total-received {
        padding: 14px 0;
        float: left;
        text-align: left;
        color: #818da1;
        p {
          margin: 6px 0;
        }
      }

      .today-unreceived {
        float: right;
        text-align: right;
      }

      .today-total-received {
        position: relative;
        text-align: center;
        float: none;

        &:before {
          position: absolute;
          content: '';
          border-top: 1px solid #d1dbe5;
          width: 240px;
          top: 55px;
          left: 50%;
          margin-left: -120px;
        }

        > .content {
          position: relative;
          padding: 10px 20px;
          background: #fff;
          display: inline-block;
        }
      }

    }

    .assets-item {
      text-align: left;
      margin-bottom: 20px;
      > label {
        color: #818da1;
        display: inline-block;
        vertical-align: middle;

      }

      > .content {
        display: inline-block;
        margin-left: 0.5em;
        vertical-align: middle;

        > button {
          display: inline-block;
          margin-left: 1em;
          vertical-align: middle;
        }
      }
    }

  }
</style>
<!--
<style lang="scss">
  .today-progress
  {
    .el-progress-bar__outer
    {
      background-color: #fecb74;
    }
  }
</style>-->
